<template>
  <div>

    <div class="addBtn">
      <el-button>
        新建
      </el-button>
    </div>


    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
      <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
      >
        <report-form/>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
	export default {
		name: "ReportPane",
		data() {
			return {
				editableTabsValue: '2',
				editableTabs: [{
					title: 'New Report',
					name: '1'
				}],
				tabIndex: 2
			}
		},
		methods: {
			addTab(targetName) {
				let newTabName = ++this.tabIndex + '';
				this.editableTabs.push({
					title: 'New Report',
					name: newTabName,
					content: 'New Tab content'
				});
				this.editableTabsValue = newTabName;
			},
			removeTab(targetName) {
				let tabs = this.editableTabs;
				let activeName = this.editableTabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}

				this.editableTabsValue = activeName;
				this.editableTabs = tabs.filter(tab => tab.name !== targetName);
			}
		}
	}
</script>

<style scoped>
  .addBtn {
    padding: 10px;
  }
</style>